<template>
	<view>
		<view class="cu-custom" :style="[{height:customBarHeight + 'px'}]">
			<view class="cu-bar fixed" :style="style" :class="[bgImage!=''?'none-bg bg-img':'']">
				<view class="action" @tap="backPage" v-if="isBack" :style="[{color: themeConfig.commonColor}]">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="[{top:statusBarHeight + 'px'}]">
					<slot name="content"></slot>
				</view>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	import * as ztnNativeFunction from '@/util/ztnNativeFunction.js'
	import * as storage from '@/util/storage.js'
	export default {
		data() {
			return {
				statusBarHeight: storage.getStatusBarHeight(),
				customBarHeight: storage.getCustomBarHeight(),
			};
		},
		name: 'cu-custom',
		emits:['parent-event'],
		computed: {
			style() {
				const primaryColor = this.$store.state.themeConfig.primaryColor
				ztnNativeFunction.setBarColor(primaryColor)
				let style =
					`height:${this.customBarHeight}px;padding-top:${this.statusBarHeight}px;background-color:${primaryColor}`;
				if (this.bgImage && this.bgImage!=='') {
					style = `${style}background-image:url(${this.bgImage});`;
				}
				return style
			},
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		props: {
			isBack: {
				type: Boolean,
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			}
		},
		methods: {
			backPage() {
				if (getCurrentPages().length < 2 && 'undefined' !== typeof __wxConfig) {
					const url = '/' + __wxConfig.pages[0]
					return uni.redirectTo({
						url
					})
				}
				uni.navigateBack({
					delta: 1
				});
			},
			toHome() {
				uni.reLaunch({
					url: '/pages/nav/nav',
				})
			},
			parentEvent() {
				this.$emit('parent-event')
			},
		}
	}
</script>

<style>

</style>